<template>
  <view class="w690 common-list-box flex-between-center cycle-item" @click="clickFun">
    <view class="content">
      <view class="img">
        <image :src="imgUrl" lazy-load></image>
      </view>
      <view class="info">
        <view class="title">{{title}}</view>
        <view class="sub-title">{{subtitle}}</view>
      </view>
    </view>
    <u-icon v-if="arrow" name="youjiantou" color="#999999" size="16" :isShowIcon="false" customPrefix="iconfontbike iconbike"></u-icon>
    <slot name="content"></slot>
  </view>
</template>

<script>
import {
		throttle
	} from '@/utils/utils.js'

export default {
  name: "motorcycle",
  props: {
    arrow: {
      type: Boolean,
      default: true
    },

    imgUrl: {
      type: String,
      default: ''
    },

    title: {
      type: String,
      default: ''
    },

    subtitle: {
      type: String,
      default: ''
    },
    
  },
  methods:{
			clickFun:throttle(function(){
				this.$emit('click')
			})
		}
}
</script>

<style lang="scss" scoped>
.cycle-item{
  .content{
    display: flex;
    align-items: center;
    image{
      width: 158rpx;
      height: 150rpx;
      background: transparent;
    }
    .info{
      color: #666666;
      font-size: 24rpx;
      margin-left: 30rpx;
      .title{
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        max-height: 46rpx;
        max-width: 365rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 30rpx;
      }
    }
  }
}
</style>